<template>
  <div>
    <el-card class="filter-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>学生资料库</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 数据筛选表单 -->
      <el-form ref="form" :model="admin" label-width="70px" size="small">
        <el-form-item label="状态">
          <el-radio-group v-model="admin.role">
            <el-radio label="">全部</el-radio>
            <el-radio label="超级管理员">超级管理员</el-radio>
            <el-radio label="考察型管理员">考察型管理员</el-radio>
            <el-radio label="材料型管理员">材料型管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账号查询">
          <el-input v-model="admin.username"></el-input>
          <el-button
            type="primary"
            :disabled="loading"
            style="margin-left: 10px"
            @click="query()"
            >查询</el-button
          >
          <el-button
            type="primary"
            style="margin-left: 10px"
            plain
            size="mini"
            @click="add()"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 查询结果 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px">根据筛选条件查询到的结果</span>
      </div>
      <el-table
        v-loading="loading"
        class="list-lable"
        :data="infor"
        style="width: 100%"
        stripe
      >
        <el-table-column
          fixed
          prop="createTime"
          label="创建时间"
          width="100"
          :formatter="formatTime"
        >
        </el-table-column>
        <el-table-column prop="nickname" label="用户姓名" width="150" />

        <el-table-column prop="username" label="登录账号" width="120">
        </el-table-column>
        <el-table-column prop="role" label="管理员级别" width="150">
        </el-table-column>
        <el-table-column label="管理员联系方式" prop="tel"> </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              circle
              icon="el-icon-edit"
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              circle
              type="danger"
              icon="el-icon-close"
              @click="Delete(scope.row._id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="getApplicationBooks"
        @current-change="getApplicationBooks"
        :current-page.sync="admin.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        :page-size.sync="admin.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 新增管理员弹窗 -->
    <el-dialog
      title="添加管理员"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
    >
      <el-form label-width="80px" :model="addAdminifon" size="small" inline>
        <el-form-item label="登录账号" label-width="130px">
          <el-input v-model="addAdminifon.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员姓名" label-width="130px">
          <el-input v-model="addAdminifon.nickname"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" label-width="130px">
          <el-input v-model="addAdminifon.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱" label-width="130px">
          <el-input v-model="addAdminifon.email"></el-input>
        </el-form-item>
        <el-form-item label="管理员性别" label-width="130px">
          <el-select v-model="addAdminifon.sex" placeholder="请选性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员电话" label-width="130px">
          <el-input v-model="addAdminifon.tel"></el-input>
        </el-form-item>
        <el-form-item label="管理员等级" label-width="140px">
          <el-select v-model="addAdminifon.role" placeholder="请选管理员等级">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="材料型管理员" value="材料型管理员"></el-option>
            <el-option label="考察型管理员" value="考察型管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改管理员信息"
      :visible.sync="dialogVisible2"
      width="50%"
      append-to-body
    >
      <el-form label-width="80px" :model="addAdminifon" size="small" inline>
        <el-form-item label="登录账号" label-width="130px">
          <el-input v-model="scope.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员姓名" label-width="130px">
          <el-input v-model="scope.nickname"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" label-width="130px">
          <el-input v-model="scope.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱" label-width="130px">
          <el-input v-model="scope.email"></el-input>
        </el-form-item>
        <el-form-item label="管理员性别" label-width="130px">
          <el-select v-model="scope.sex" placeholder="请选性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员电话" label-width="130px">
          <el-input v-model="scope.tel"></el-input>
        </el-form-item>
        <el-form-item label="管理员等级" label-width="140px">
          <el-select v-model="scope.role" placeholder="请选管理员等级">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="材料型管理员" value="材料型管理员"></el-option>
            <el-option label="考察型管理员" value="考察型管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  addAdmin,
  getAdminList,
  updateAdmin,
  deleteAdmin
} from '@/api/user'
export default {
  name: 'adminAcount',
  data () {
    return {
      admin: {
        role: '',
        username: '',
        pageNum: 1,
        pageSize: 10,
        status: ''
      },
      loading: false,
      total: 0,
      infor: [],
      dialogVisible: false,
      dialogVisible2: false,
      addAdminifon: {
        username: '',
        nickname: '',
        password: '',
        email: '',
        sex: '',
        tel: '',
        role: ''
      },
      role: ["考察型管理员"],
      scope: {}
    }
  },
  created () {
    this.query()
  },
  methods: {
    formatTime (row, cell, cellValue) {
      return dayjs(cellValue).format('YYYY-MM-DD')
    },
    async query () {
      const res = await getAdminList(this.admin)
      this.infor = res.data.records
    },
    getApplicationBooks () {

    },
    add () {
      this.dialogVisible = true
    },
    commit () {
      addAdmin(this.addAdminifon).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: '添加失败'
        })
      })
    },
    edit (data) {
      this.scope = data
      this.dialogVisible2 = true
    },
    update () {
      updateAdmin(this.scope).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogVisible2 = false
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: '修改失败' + err.message
        })
      })
    },
    Delete(id) {
        this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          deleteAdmin(id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.query()
            }).catch((err) => {
              this.$message({
                type: 'info',
                message: '删除失败' + err.message
              })
            })
        })
      }
  }
}
</script>

<style>
</style>
